<template>
    <div>
        <!-- 搜索与添加区域 -->
        <el-row>
            <el-col :span="12">
                <el-input placeholder="请输入商品ID" v-model="queryInfo.queryId" clearable @clear="getItemsList">
                </el-input>
            </el-col>
            <el-col :span="2">
               <el-button slot="append"  @click="getItemsListById">搜索</el-button>
            </el-col>
            <el-col :span="3">
                <el-button type="primary" @click="addDialogVisible=true">添加商品</el-button>
            </el-col>
        </el-row>
        <!-- 表格区域-->
        <el-table :data="itemsList" border style="width: 100%" stripe>
            <el-table-column prop="id" label="商品序号" width="100" />
            <el-table-column prop="itemsname" label="商品名" width="150" />
            <el-table-column prop="amount" label="商品价格/元" width="150" />
            <el-table-column prop="sum" label="商品数量" width="150" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" @click="editItems(scope.row.id)">编辑</el-button>
                    <el-popconfirm title="是否确认删除?" @confirm="removeItems(scope.row.id)" >
                        <template #reference>
                            <el-button type="danger">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.current"
            :page-sizes="[5, 8, 10]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination> 
        <!-- 添加对话框 -->
        <el-dialog v-model="addDialogVisible" title="添加商品" width="30%" :before-close="handleClose">
            <el-form :model="itemsForm" label-width="120px">
                <el-form-item label="商品名">
                <el-input v-model="itemsForm.itemsname" />
                </el-form-item>
                <el-form-item label="商品价格">
                <el-input v-model="itemsForm.amount" />
                </el-form-item>
                <el-form-item label="商品数量">
                <el-input v-model="itemsForm.sum" />
                </el-form-item>
                <el-form-item label="商品描述">
                <el-input v-model="itemsForm.description" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="addDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="addUser">确定</el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 修改商品信息对话框 -->
        <el-dialog v-model="editDialogVisible" title="修改商品信息" width="30%" :before-close="handleClose">
            <el-form :model="itemsForm" label-width="120px">
                <el-form-item label="商品名">
                <el-input v-model="itemsForm.itemsname" />
                </el-form-item>
                <el-form-item label="商品价格">
                <el-input v-model="itemsForm.amount" />
                </el-form-item>
                <el-form-item label="商品数量">
                <el-input v-model="itemsForm.sum" />
                </el-form-item>
                <el-form-item label="商品描述">
                <el-input v-model="itemsForm.description" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="editDialogVisible= false">取消</el-button>
                    <el-button type="primary" @click="saveEdit">确定</el-button>
                </span>
            </template>
        </el-dialog>                       
    </div>
</template>
<script>
    export default{
        name:'Items',
        data(){
            return{
                itemsList:'',
                queryInfo:{
                queryId:'',
                current:1,
                pagesize:5
                },
                total:'',
                itemsForm:{
                    id:'',
                    itemsname:'',
                    amount:'',
                    sum:'',
                    description:''
                },
                addDialogVisible:false,
                editDialogVisible:false
            }
        },
        mounted(){
            this.getItemsList()
        },
        methods:{
            async getItemsList(){
                const result=await this.$http.get('/items/find',{params:{i:this.queryInfo.current,j:this.queryInfo.pagesize}})
                this.itemsList=result.records
                this.total=result.total
            },
            // 删除商品
            async removeItems(id){
            await this.$http.delete('/items/del',{params:{id:id}})
            this.getItemsList()
            },
            //添加商品
            async addUser(){
                const result= await this.$http.post('/items/add',this.itemsForm)
                console.log(result);
                this.getItemsList()
                this.addDialogVisible =false
            },            
            //分页变化触发
            handleSizeChange (val){
            this.queryInfo.pagesize=val
            this.getItemsList()
            },
            handleCurrentChange (val)  {
            this.queryInfo.current=val
            this.getItemsList()
            },
            // 关闭对话框重置表单
            handleClose(){
                this.itemsForm=''
            },
            // 打开编辑
            async editItems(id){
                this.editDialogVisible=true
                const result=  await this.$http.get('/items/findid',{params:{id:id}})
               //   console.log(result);
                this.itemsForm=result[0]
                console.log(this.itemsForm);
            },
            //确定编辑修改商品信息
            async saveEdit(){
                await this.$http.put('/items/upd',this.itemsForm)
                this.getItemsList()
                this.editDialogVisible =false
            },
        }

    }
</script>
<style>
    .el-pagination{
        margin-left: 200px;
    }
</style>